<template>
  <view id="addAddress">
    <u-popup
      v-model="show"
      mode="center"
      :height="740"
      width="90%"
      :border-radius="20"
      :closeable="true"
    >
      <view class="poup">
        <view class="poup-title">收货地址</view>
        <view class="form-item">
          <view>姓名</view>
          <view>
            <u-input
              v-model="apiForm.linkman"
              type="text"
              height="120"
              :border="false"
              input-align="right"
              :clearable="false"
              :placeholder-style="'text-align:end;color:#999999;font-size:28rpx;'"
              placeholder="请填写你的姓名"
            />
          </view>
        </view>
        <view class="form-item">
          <view>联系电话</view>
          <view>
            <u-input
              v-model="apiForm.linktel"
              type="number"
              height="120"
              :border="false"
              input-align="right"
              :clearable="false"
              :placeholder-style="'text-align:end;color:#999999;font-size:28rpx;'"
              placeholder="请填写你的联系电话"
            />
          </view>
        </view>
        <view class="form-item">
          <view>收货地址</view>
          <view>
            <u-input
              v-model="apiForm.address"
              type="text"
              height="120"
              :border="false"
              input-align="right"
              :placeholder-style="'text-align:end;color:#999999;font-size:28rpx;'"
              :clearable="false"
              placeholder="请填写你的收货地址"
            />
          </view>
        </view>

        <!-- 提示 -->
        <view class="tips">
          <image src="@/static/center/tips.png" class="image" />
          <view>请务必确保信息填写正确，否则订单将无法配送</view>
        </view>
        <view class="save" @click="addAddress">{{
          isEditor == true ? "更改" : "添加"
        }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      isEditor: false, //代表是编辑
      apiForm: {
        linkman: "",
        linktel: "",
        address: "",
      },
    };
  },
  methods: {
    /**
     * 更改地址
     */
    changeAddress() {},
    /**
     * 提交收货地址
     */
    addAddress() {
      // addressApi
      if (this.apiForm.linkman === "" || this.apiForm.linkman === null) {
        this.$u.toast("姓名不能为空");
        return;
      }
      if (this.apiForm.linktel === "" || this.apiForm.linktel === null) {
        this.$u.toast("电话不能为空");
        return;
      }
      if (this.apiForm.address === "" || this.apiForm.address === null) {
        this.$u.toast("收货地址不能为空");
        return;
      }
      this.$u.api.addressApi(this.apiForm).then((res) => {
        var address = this.vuex_address;
        address = this.apiForm;
        this.$u.vuex("vuex_address", address);
        uni.redirectTo({
          url: "/pages/center/center",
        });
        if (this.isEditor) {
          uni.showToast({
            title: "修改成功",
            duration: 2000,
          });
        } else {
          uni.showToast({
            title: "添加成功",
            duration: 2000,
          });
          this.$parent.noAddress = false;
          this.$parent.getUserCenterData()
        }
        this.show = false;
      });
    },
  },
  onLoad(option) {},
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.poup {
  padding: 23rpx;
  .poup-title {
    color: #333333;
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 10rpx;
    margin-bottom: 20rpx;
  }
  .form-item {
    @include flex-row;
    height: 120rpx;
    border-bottom: 1rpx solid #e6e6e6;
    & > view:nth-child(1) {
      width: 120rpx;
      color: #333333;
      font-size: 28rpx;
    }
    & > view:nth-child(2) {
      flex: 1;
    }
  }
  .tips {
    background-color: #f7deda;
    color: #d65c45;
    font-size: 24rpx;
    margin-top: 60rpx;
    height: 48rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 10rpx;
    }
  }
  .save {
    background-color: #d65c45;
    color: #ffffff;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 20rpx;
    margin-top: 60rpx;
  }
}
</style>
